var trees = [
    {
        "categoryId": 1,
        "categoryName": "Java",
        "parentId": 0
    },
    {
        "categoryId": 8,
        "categoryName": "Java基础",
        "parentId": 1
    },
    {
        "categoryId": 13,
        "categoryName": "JavaOOP",
        "parentId": 8
    },
    {
        "categoryId": 19,
        "categoryName": "继承",
        "parentId": 13
    },
    {
        "categoryId": 20,
        "categoryName": "封装",
        "parentId": 13
    },
    {
        "categoryId": 21,
        "categoryName": "多态",
        "parentId": 13
    },


    {
        "categoryId": 14,
        "categoryName": "Java反射",
        "parentId": 8
    },

    {
        "categoryId": 2,
        "categoryName": "Python",
        "parentId": 0
    },
    {
        "categoryId": 9,
        "categoryName": "Python基础",
        "parentId": 2
    },
    {
        "categoryId": 15,
        "categoryName": "Python字典",
        "parentId": 9
    },
    {
        "categoryId": 16,
        "categoryName": "爬虫",
        "parentId": 9
    },

    {
        "categoryId": 3,
        "categoryName": "UI",
        "parentId": 0
    },
    {
        "categoryId": 10,
        "categoryName": "UI设计基础",
        "parentId": 3
    },
    {
        "categoryId": 17,
        "categoryName": "PS",
        "parentId": 10
    },
    {
        "categoryId": 18,
        "categoryName": "AE",
        "parentId": 10
    },


    {
        "categoryId": 4,
        "categoryName": "JavaScript",
        "parentId": 0
    },
    {
        "categoryId": 11,
        "categoryName": "ES6规范",
        "parentId": 4
    },
    {
        "categoryId": 22,
        "categoryName": "DOM",
        "parentId": 11
    },

    {
        "categoryId": 5,
        "categoryName": "MySQL",
        "parentId": 0
    },
    {
        "categoryId": 12,
        "categoryName": "MySQL基础",
        "parentId": 5
    },

    {
        "categoryId": 6,
        "categoryName": "Network",
        "parentId": 0
    },
    {
        "categoryId": 7,
        "categoryName": "QA",
        "parentId": 0
    }
];
var treeData = [
    {
        "categoryId": 1,
        "categoryName": "Java",
        "parentId": 0,
        "childNodeList": [
            {
                "categoryId": 8,
                "categoryName": "Java基础",
                "parentId": 1,
                "childNodeList": [
                    {
                        "categoryId": 13,
                        "categoryName": "JavaOOP",
                        "parentId": 8,
                        "childNodeList": [
                            {
                                "categoryId": 19,
                                "categoryName": "继承",
                                "parentId": 13,
                                "childNodeList": []
                            },
                            {
                                "categoryId": 20,
                                "categoryName": "封装",
                                "parentId": 13,
                                "childNodeList": []
                            },
                            {
                                "categoryId": 21,
                                "categoryName": "多态",
                                "parentId": 13,
                                "childNodeList": []
                            }
                        ]
                    },
                    {
                        "categoryId": 14,
                        "categoryName": "Java反射",
                        "parentId": 8,
                        "childNodeList": []
                    }
                ]
            }
        ]
    },
    {
        "categoryId": 2,
        "categoryName": "Python",
        "parentId": 0,
        "childNodeList": [
            {
                "categoryId": 9,
                "categoryName": "Python基础",
                "parentId": 2,
                "childNodeList": [
                    {
                        "categoryId": 15,
                        "categoryName": "Python字典",
                        "parentId": 9,
                        "childNodeList": []
                    },
                    {
                        "categoryId": 16,
                        "categoryName": "爬虫",
                        "parentId": 9,
                        "childNodeList": []
                    }
                ]
            }
        ]
    },
    {
        "categoryId": 3,
        "categoryName": "UI",
        "parentId": 0,
        "childNodeList": [
            {
                "categoryId": 10,
                "categoryName": "UI设计基础",
                "parentId": 3,
                "childNodeList": [
                    {
                        "categoryId": 17,
                        "categoryName": "PS",
                        "parentId": 10,
                        "childNodeList": []
                    },
                    {
                        "categoryId": 18,
                        "categoryName": "AE",
                        "parentId": 10,
                        "childNodeList": []
                    }
                ]
            }
        ]
    },
    {
        "categoryId": 4,
        "categoryName": "JavaScript",
        "parentId": 0,
        "childNodeList": [
            {
                "categoryId": 11,
                "categoryName": "ES6规范",
                "parentId": 4,
                "childNodeList": [
                    {
                        "categoryId": 22,
                        "categoryName": "DOM",
                        "parentId": 11,
                        "childNodeList": []
                    }
                ]
            }
        ]
    },
    {
        "categoryId": 5,
        "categoryName": "MySQL",
        "parentId": 0,
        "childNodeList": [
            {
                "categoryId": 12,
                "categoryName": "MySQL基础",
                "parentId": 5,
                "childNodeList": []
            }
        ]
    },
    {
        "categoryId": 6,
        "categoryName": "Network",
        "parentId": 0,
        "childNodeList": []
    },
    {
        "categoryId": 7,
        "categoryName": "QA",
        "parentId": 0,
        "childNodeList": []
    }
];
var cc = new Vue({
    el: "#rootNode",
    data: {
        tree: treeData,

    },
    mounted(){
        let treeNodes = this.tree;

    },
    methods:{
        openList: function (elec, that) {
            let target = that.target;
            $(target).next().css("display","block");
        },
        handleNodeClick(data) {
            console.log(data);
        }
    }
});

// var countNum = 0;
//
//
// var cc = new Vue({
//     el: "#courseCategory",
//     data: {
//         tree: trees,
//         subNodes: [,
//
//     },
//     mounted() {
//         $(".categoryOne").each(function (e) {
//             console.info(this);
//             console.info(e)
//
//         });
//     },
//     methods: {
//         openList: function (elec, that) {
//             console.info(elec);
//             console.info(that.target)
//             let target = that.target;
//             $(target).after("<div v-for=\"node in subNodes\" class=\"categoryTwo\" @click=\"openList(node,$event)\">{{node.categoryName}}</div>");
//             this.subNodes = elec.childNodeList;
//             console.info(this.subNodes)
//
//         },
//         findSubNodes: function (node, that) {
//     let subNodes = node.subNodes;
//     let length = subNodes.length;
//     if (length === 0) {
//         return false;
//     }
//     for (let i = 0; i < length; i++) {
//         let listElement = subNodes[i;
//         let newNode = ""
//         this.$data.newNode=listElement;
//         let createdEle = that.after("<div v-for=\"node in "+subNodes[countNum+++"\" class=\"categoryTwo\" @click=\"openList(node,$event)\">{{node.categoryName}}</div>");
//         if (!this.findSubNodes(listElement, createdEle)) {
//             continue;
//         }
//     }
//     return true;
// }
//     }
// });

// function openList(elec) {
//     console.info("进入方法了")
//     // let index = elec.getAttribute("name");
//     let parentNode = trees[;
//     let nodeList = parentNode.subNodes;
//     if (nodeList == null) {
//         console.info("这个分类没有子分类")
//     } else {
//         let length = nodeList.length;
//         for (let i = 0; i < length; i++) {
//             let subNode = document.createElement("div");
//             subNode.setAttribute("class", "categoryTwo");
//             subNode.setAttribute("onclick", "openList(this)");
//             subNode.setAttribute("name", i);
//             subNode.setAttribute("data-node","")
//             subNode.innerText = nodeList[i.currentNode.categoryName;
//             parentNode.after(subNode);
//         }
//     }
//
// }
//
//
// $(function () {
//
//     var rootNode = document.getElementById("rootNode");
//     let size = trees.length;
//     console.info("一级分类有几个？：" + size);
//     for (let i = 0; i < size; i++) {
//         let subNode = document.createElement("div");
//         subNode.setAttribute("class", "categoryOne");
//         subNode.setAttribute("onclick", "openList(this)");
//         subNode.setAttribute("name", i);
//         subNode.setAttribute("data-node",trees[i);
//         subNode.innerText = trees[i.currentNode.categoryName;
//         rootNode.appendChild(subNode);
//     }
//
// });
//
